<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 合作入驻
                </el-breadcrumb-item>
                <el-breadcrumb-item>装修团队</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box" style="width: 80%;">
                <el-form ref="sizeForm"  :rules="rules" :model="sizeForm" label-width="80px" size="mini">
                    <el-form-item label="友商类型 " prop="friendly_company_kind">
                        <el-radio-group v-model="sizeForm.friendly_company_kind" size="medium">
                            <el-radio border
                                      v-for="kind in kinds"
                                      :label="kind.friendly_company_value"
                                      :key="kind.friendly_company_kind"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="团队名称 " prop="company_name">
                        <el-input v-model="sizeForm.company_name"></el-input>
                    </el-form-item>
                    <el-form-item label="团队地址 " prop="company_address">
                        <el-input v-model="sizeForm.company_address"></el-input>
                    </el-form-item>
                    <el-form-item label="团队电话 " prop="company_phone">
                        <el-input v-model="sizeForm.company_phone"></el-input>
                    </el-form-item>
                    <el-form-item label="备用电话 " prop="company_rephone">
                        <el-input v-model="sizeForm.company_rephone"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证 " prop="company_idcard">
                        <el-input v-model="sizeForm.company_idcard"></el-input>
                    </el-form-item>
                    <el-form-item label="责任姓名 " prop="company_idname">
                        <el-input v-model="sizeForm.company_idname"></el-input>
                    </el-form-item>
                    <el-form-item label="入驻时间 " prop="intime">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.intime" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>

                    <div>
                        <div class="content-title" style="margin-bottom: 10px;margin-left: 80px;color: gainsboro">
                            <span style="color: red">
                                *
                            </span>
                            支持拖拽,点选上装修团队资质文档
                        </div>
                        <el-form-item>
                            <el-upload
                                    ref="upload"
                                    v-model="file"
                                    action=""
                                    :multiple="false"
                                    :limit="1"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :on-change="handleChange"
                                    :file-list="fileList"
                                    class="upload-demo"
                                    drag
                                    action=""
                                    multiple
                                    :auto-upload="false">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传doc/docx/pdf文件，且不超过500M</div>
                            </el-upload>
                        </el-form-item>
                    </div>

                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm('sizeForm')">立即创建</el-button>
                        <el-button @click="resetForm('sizeForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'comeIn',
    data() {
        //装修团队名称
        var name = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的装修团队名'));
            }else {
                callback();
            }
        };
        //装修团队地址
        var address = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的装修团队地址'));
            }else {
                callback();
            }
        };
        //身份证
        var idcard = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的身份证号码'));
            }else {
                callback();
            }
        };
        
        //姓名
        var idname = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的姓名'));
            }else {
                callback();
            }
        };
        //电话号码
        var phone = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的电话号码'));
            }else {
                callback();
            }
        };
        //备用电话号码
        var rephone = (rule, value, callback) => {
            if (value.trim() === '') {
                callback(new Error('请输入不为空的备用电话号码'));
            }else if (value.trim() ===this.sizeForm.company_phone){
                callback(new Error('备用电话号码不能和第一号码相同'));
            }
            else {
                callback();
            }
        };
        return {
            file:[],
            fileList: [],
            kinds:[],
            sizeForm: {
                friendly_company_kind: '',
                company_name: '',
                company_address: '',
                company_phone: '',
                company_rephone: '',
                company_idcard: '',
                company_idname:'',
                intime:''

            },
            rules: {
                company_name: [
                    { validator: name, trigger: 'blur' ,required: true,trigger: 'blur' },
                    { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' }
                ],
                company_address: [
                    { validator: address, trigger: 'blur' ,required: true,trigger: 'blur' },
                    { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' }
                ],
                company_phone: [
                    { required: true,validator: phone, trigger: 'blur' },
                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入有效的电话号码' }
                ],
                company_rephone: [
                    { required: true,validator: rephone, trigger: 'blur' },
                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入有效的备用电话号码' }
                ],
                friendly_company_kind: [
                    { required: true, message: '请选择入驻类型!', trigger: 'blur' }
                ],
                company_idcard: [
                    { required: true,validator: idcard, trigger: 'blur' },
                    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入有效的身份证号码' }
                ],
                company_idname: [
                    { required: true,validator: idname, trigger: 'blur' },
                    { pattern: /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,8}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,8}[a-zA-Z]{1}$)/, message: '请输入有效的姓名' }
                ],
                intime: [
                    { type: 'date', required: true, message: '请输入装修团队入驻日期', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        handleChange(file, fileList) {
            console.log("file:");
            console.log(file);
            console.log("fileList:");
            console.log(fileList);
            this.file.push(file);
            console.log("this.file:");
            console.log(this.file[0]);
        },

        handleRemove(file, fileList) {
            console.log("file:"+file);
            console.log("fileList:"+fileList);
            console.log("this.file:"+this.file);
        },
        handlePreview(file) {
            console.log(file);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log("valid:"+valid);
                if (valid) {
                        this.$refs.upload.submit();
                        let _this = this;
                        //let params = new URLSearchParams();
                        let form = this.$refs['sizeForm'].$el
                        let params = new FormData(form)
                        /*formData.append('name', this.form.name)
                        formData.append('region', this.form.region)
                        formData.append('file', this.fileList[0])*/
                        console.log(this.sizeForm.company_name);
                        params.append("friendly_company_kind",this.sizeForm.friendly_company_kind);
                        params.append("company_name",this.sizeForm.company_name);
                        params.append("company_address",this.sizeForm.company_address);
                        params.append("company_phone",this.sizeForm.company_phone);
                        params.append("company_rephone",this.sizeForm.company_rephone);
                        params.append("company_idcard",this.sizeForm.company_idcard);
                        params.append("company_idname",this.sizeForm.company_idname);
                        params.append("intime",this.sizeForm.intime);
                        //文件内容
                        params.append("upload",this.file[0].raw);
                        //文件名字
                        params.append("uploadName",this.file[0].name);
                        console.log(params);
                        // this.$http.post('friendlyCompany/creatDecorationCompany',params
                        this.$axios.post('friendlyCompany/creatDecorationCompanyAndUpload',params
                        )
                        //then获取成功；response成功后的返回值（对象）
                            .then(response=>{
                                console.log(response);
                                console.log(response.data);
                                //重置
                                this.sizeForm.friendly_company_kind= '',
                                this.sizeForm.company_name= '',
                                this.sizeForm.company_address= '',
                                this.sizeForm.company_phone= '',
                                this.sizeForm.company_rephone= '',
                                this.sizeForm.company_idcard= '',
                                this.sizeForm.company_idname='',
                                this.sizeForm.intime='',
                                this.file=[]
                                if (response.data=='success'){
                                    this.$message.success(`创建成功`);
                                }else {
                                    this.$message.error(response.data);
                                }
                            })
                            //获取失败
                            .catch(error=>{
                                console.log(error);
                                alert('网络或服务错误，不能访问');
                            })
                } else {
                    this.$message.warning(`请选择上传的资质文件!`);
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

    }
    ,created() {

        //拿到友商种类
        this.$axios.get('friendlyCompany/getFriendlyCompanyKind')
        //then获取成功；response成功后的返回值（对象）
            .then(response=>{
                this.kinds = response.data;
                console.log(this.kinds);
            })
            //获取失败
            .catch(error=>{
                this.loading=false;
                console.log(error);
                alert('网络或服务错误，不能访问');
            })


    }
};
</script>